<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .list{
        list-style: none;
        width:300px;
    }
    .list li{
        width:100%;
        height:60px;
        line-height:60px;
    }
</style>
<body>
    <div id="app">
        <input type="text" v-on:input="getdata()" v-model="text">
        <ul class="list" v-show="flag">
            <li v-for="(item,index) in result || items" :key="item.id">{{item.name}}</li>
        </ul>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script>
    new Vue({  
    el: '#app',  
    data: {
            flag:false,
            timer:null,
            text:"",
            result:null,
            items: [
                {
                    name:"皇上",
                    id:1
                },
                {
                    name:"宫女",
                    id:1
                },
                {
                    name:"皇后",
                    id:1
                }
            ]
        },
        methods: {
            getdata(){
                const vm = this
                vm.flag = true
                clearTimeout(vm.timer) 
                vm.timer = setTimeout(()=> {
                    this.filterData()
                }, 1000)
            },
            filterData(){
                   this.result = this.items.filter((value,index)=>{
                        return value.name.includes(this.text)
                })
            }

        }
    })  
    
    
    </script>
</body>
</html>